import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Zoom, EffectFade } from 'swiper/modules';
import { FileModel } from '../common/model';

// Import Swiper styles
import 'swiper/less';
import 'swiper/less/navigation';
import 'swiper/less/pagination';
import "swiper/less/zoom";
import 'swiper/less/effect-fade'

export const SwiperCore: React.FC<{
  images: FileModel[]
}> = ({ images }) => {
  return (
    <Swiper
      className='select-none h-[500px]'
      modules={[Navigation, Pagination, Zoom, EffectFade]}
      pagination={{ clickable: true }}
      navigation
      scrollbar={{ draggable: true }}
      zoom={{ maxRatio: 5 }}
      fadeEffect={{ crossFade: false }}
      effect='fade'
      loop
    // onSwiper={(swiper) => console.log(swiper)}
    // onSlideChange={() => console.log('slide change')}
    >
      {images.map((f, index) =>
        <SwiperSlide key={index} className='bg-black' zoom>
          <div className="swiper-zoom-container">
            <img
              alt=""
              src={import.meta.env.VITE_BASE_URL + f.url}
              loading="lazy"
              className='object-cover w-full h-full'
            />
            <div className="swiper-lazy-preloader swiper-lazy-preloader-white" />
          </div>
        </SwiperSlide>
      )}
    </Swiper>
  )
}